import './index.css';
import registerConfig, {IComponent} from './registerConfig';
import {GlobalContext} from '../../store';
import React from 'react';

interface IProps {
}

let MaterialPanel = (props: IProps) => {

  const {setCurrentMaterial} = React.useContext(GlobalContext);

  //监听 dragStart 事件在拖拽开始时记录被拖拽组件信息
  const handleDragStart = (e: any, component: IComponent) => {
    // 记录鼠标相对于元素左边和上边的距离
    const {offsetX, offsetY} = e.nativeEvent;
    component.offsetInfo = {
      offsetX,
      offsetY,
    };
    console.log('offsetInfo:', component.offsetInfo)
    component.element = e?.target ?? null;
    setCurrentMaterial(component);
  };

  return (
    <div>
      {registerConfig.componentList.map(component => (
        <div key={component.type} className="editor-left-item">
          <span>{component.label}</span>
          <div draggable onDragStart={e => handleDragStart(e, component)}>
            {component.preview()}
          </div>
        </div>
      ))}
    </div>
  );
};

export {MaterialPanel};
